<template>
	<view class="point-container list-bg">
		<nav-bar :title="legal_name + '/' + currency_name" @_back="_back" rightIcon="screen_id"
			@rightClick="rightClick" />
		<!-- 金额 -->
		<view class="price-box dis-between padd-auto">
			<view class="left-box">
				<text class="bold fall">{{last_price}}</text>
				<view>
					<text class="white-text">≈${{last_price * Number(ExRAte) | xiaoshudian}}</text>
					<text class="fall">{{change}}%</text>
				</view>
			</view>
			<view class="right-box dis-between">
				<view class="dis-between">
					<text>H</text>
					<text class="white-text">{{lever_hight}}</text>
				</view>
				<view class="dis-between">
					<text>L</text>
					<text class="white-text">{{lever_low}}</text>
				</view>
				<view class="dis-between">
					<text>24H</text>
					<text class="white-text">{{lever_24hight}}</text>
				</view>
			</view>
		</view>
		<view class="line-empty"></view>
		<tabs :fontSize="24" padding="30rpx" :list="tabsList" @click="kLineClick"></tabs>
		<view ref="viewklinechart" class="viewklinechart">
			<!--  #ifdef  H5 -->
			<div>
				<div class='kline' id="kline" ref='kline'></div>
			</div>
			<!--  #endif -->

			<!--  #ifndef  H5 -->
			<view>
				<canvas id="kline2" canvas-id='kline2' class='kline2'
					v-bind:style="{width: ChartWidth+'px', height: ChartHeight+'px'}" @touchstart="KLineTouchStart"
					@touchmove='KLineTouchMove' @touchend='KLineTouchEnd'></canvas>
			</view>
			<!--  #endif -->
		</view>
		<!-- 按钮 -->
		<view class="data-btn dis-between list-bg">
			<view class="btn rise" @click="rightClick">
				<text>{{i18n.period.buy}}</text>
			</view>
			<view class="btn fall" @click="rightClick">
				<text>{{i18n.period.sell}}</text>
			</view>
		</view>
		<custom-loading text="" mask="true" click="true" ref="loading"></custom-loading>
	</view>
</template>

<script>
	// #ifdef H5
	import HQChart from '../../js_sdk/jones-hqchart/umychart_uniapp_h5/umychart.uniapp.h5.js'
	// #endif

	// #ifndef H5
	import {
		JSCommon
	} from '../../js_sdk/jones-hqchart/umychart.uniapp/umychart.wechat.3.0.js'
	import {
		JSCommonHQStyle
	} from '../../js_sdk/jones-hqchart/umychart.uniapp/umychart.style.wechat.js'
	// #endif

	HQChart.JSConsole.Chart.Log = function() {} //不输出图形日志
	HQChart.JSConsole.Complier.Log = function() {} //不输出指标脚本执行日志

	var pako = require('pako');

	function DefaultData() {}

	DefaultData.GetKLineOption = function() {
		let data = {
			Type: '历史K线图',

			Windows: //窗口指标
				[{
						Index: "EMPTY",
						Modify: false,
						Change: false,
						TitleHeight: 0
					},
					{
						Index: "VOL",
						Modify: false,
						Change: false,
						TitleHeight: 0
					}
				],

			IsAutoUpdate: false, //是自动更新数据(不自动更新由外部更新)
			IsApiPeriod: true, //使用Api计算周期
			IsCorssOnlyDrawKLine: true,
			CorssCursorTouchEnd: true,

			Border: //边框
			{
				Left: 1,
				Right: 1, //右边间距
				Top: 1,
				Bottom: 25,
			},

			KLine: {
				Right: 1, //复权 0 不复权 1 前复权 2 后复权
				Period: 4, //周期: 0 日线 1 周线 2 月线 3 年线 
				PageSize: 30,
				RightSpaceCount: 3,
				IsShowTooltip: false
			},

			Frame: //子框架设置
				[{
						SplitCount: 3, //Y轴3等份
						IsShowLeftText: false, //左侧不显示刻度文字
						SplitType: 1,
						Height: 8, //高度比值
						Custom: [{
							Type: 0,
							Position: 'right'
						}] //最新价格刻度
					},

					{
						SplitCount: 2, //Y轴2等份
						IsShowLeftText: false, //左侧不显示刻度文字
						SplitType: 1,
						Height: 2
					},
				],

			KLineTitle: {
				IsShowName: false,
				IsShowSettingInfo: false
			},

			ExtendChart: [{
					Name: 'KLineTooltip'
				}, //开启手机端tooltip
			],

		};

		return data;
	}

	var g_KLine = {
		JSChart: null
	};

	import minix from '@/utils/minix.js'
	import Tabs from '@/components/Tabs/index.vue'
	import HistogramChart from '@/components/stan-ucharts/HistogramChart.vue';
	import PeiChart from '@/components/stan-ucharts/PieChart.vue'
	import CustomLoading from '@/components/Loadidng/index.vue'
	import {
		currencyNew_timeshar,
		leverDeal
	} from "@/api/index.js"
	import {
		mapGetters
	} from "vuex"
	export default {
		mixins: [minix],
		components: {
			Tabs,
			HistogramChart,
			PeiChart,
			CustomLoading
		},
		filters: {
			xiaoshudian(val) {
				return Math.round((Number(val) * 100)) / 100
			},
		},
		computed: {
			...mapGetters(['token']),
			i18n() {
				return this.$t('message');
			},
			tabsList() {
				return [{
						title: this.$t('message').common.first_m,
						value: 4
					},
					{
						title: this.$t('message').common.five_m,
						value: 5
					},
					{
						title: this.$t('message').common.fifteen_m,
						value: 6
					},
					{
						title: this.$t('message').common.thirty_m,
						value: 7
					},
					{
						title: this.$t('message').common.first_d,
						value: 0
					},
					{
						title: this.$t('message').common.first_w,
						value: 1
					},
					{
						title: this.$t('message').common.first_mon,
						value: 2
					},
					{
						title: this.$t('message').common.first_y,
						value: 3
					},
				]
			},
		},
		onReady() {
			this.$refs.loading.open();

			// #ifdef H5
			this.OnSize();
			this.CreateKLineChart();
			// #endif
		},
		onShow() {
			uni.getSystemInfo({
				success: (res) => {
					this.$nextTick(() => {
						this.OnSize();
						this.CreateKLineChart();
					})
				}
			});
		},

		onHide() {
			if (this.SocketOpen) {
				uni.closeSocket();
				this.SocketOpen = false;
			}

			this.ClearChart();
		},

		onUnload() {
			if (this.SocketOpen) {
				uni.closeSocket();
				this.SocketOpen = false;
			}

			this.ClearChart();
		},
		data() {
			return {
				period: '1min',
				legal_name: '',
				currency_name: '',
				legal_id: 0,
				currency_id: 0,

				ExRAte: 0,
				last_price: 0,
				lever_24hight: 0,
				lever_hight: 0,
				lever_low: 0,
				change: 0,

				isRequest: true,

				Symbol: 'btcusdt.BIT',
				OriginalSymbol: 'btcusdt',
				KLine: {
					Option: DefaultData.GetKLineOption(),
				},

				WSUrl: 'wss://api.huobiasia.vip/ws',
				SocketOpen: false,
				LastSubString: null, //最后一个订阅的数据
			}
		},
		async onLoad(data) {
			this.legal_name = data.legal_name;
			this.legal_id = data.legal_id;
			this.currency_name = data.currency_name;
			this.currency_id = data.currency_id;
			await this.getPointDetail();
			// await this.K_line_load(60);
			await this.getKline()
		},
		destroyed() {
			this.isRequest = false;
		},
		methods: {
			rightClick() {
				uni.switchTab({
					url: '/pages/point/index'
				})
			},
			async getPointDetail() {
				let {
					error,
					res
				} = await leverDeal({
					legal_id: this.legal_id,
					currency_id: this.currency_id,
					token: this.token
				});
				if (error) return;
				// 顶部数据 start
				this.ExRAte = res.ExRAte;
				// this.last_price = res.last_price;
				this.lever_24hight = res.lever_24hight;
				// this.lever_hight = res.lever_hight;
				// this.lever_low = res.lever_low;
				this.change = res.change;
				// end

				this.$refs.loading.close();
			},
			// k线图
			async K_line_load(time) {
				this.chartData.categories = [];
				this.chartData.series[0].data = [
					[0, 0, 0, 0]
				];
				let {
					error,
					res
				} = await currencyNew_timeshar({
					period: this.period,
					from: Date.parse(new Date()) / 1000 - time,
					to: Date.parse(new Date()) / 1000,
					symbol: this.currency_name + '/' + this.legal_name
				});
				if (error) return;

				if (!res.length) return;
				let arry = []
				for (let i in res) {
					this.chartData.categories.push('');
					let obj = [
						Number(res[i].open),
						Number(res[i].close),
						Number(res[i].low),
						Number(res[i].high),
					]
					arry.push(obj);
				}
				this.chartData.series[0].data = arry;
				this.$refs.loading.close();
				// this.$refs.kLinePoint.uchartsUpdata(this.chartData)
			},
			kLineClick(val) {
				// if (typeof(val)=='string') return this.ChangeSymbol(val);
				this.ChangePeriod(typeof(val) === 'object' ? val.value : val);
			},
			getKline() {
				let _this = this;
				_this.time = setInterval(() => {
					// _this.kLineClick({value:_this.period});
					clearInterval(_this.time)
					_this.time = null;
					if (!_this.isRequest) return;
					_this.getPointDetail();
					_this.getKline();
				}, 1500)
			},

			//对外接口
			ChangePeriod(period) //周期切换
			{
				//var symbol=this.Symbol;
				g_KLine.JSChart.ChangePeriod(period);
			},

			ChangeSymbol(symbol) //切换股票
			{
				if (this.OriginalSymbol == symbol) return;

				this.OriginalSymbol = symbol;
				this.Symbol = symbol + '.BIT';
				g_KLine.JSChart.ChangeSymbol(this.Symbol);
			},

			OnSize() {
				// #ifdef H5
				this.OnSize_h5();
				// #endif
			},

			OnSize_h5() {

				let divKLineChart = this.$refs.viewklinechart.$el;
				let height = divKLineChart.offsetHeight;
				let width = divKLineChart.offsetWidth;

				let kline = this.$refs.kline;
				kline.style.width = width + 'px';
				kline.style.height = height + 'px';
				if (g_KLine.JSChart) g_KLine.JSChart.OnSize();
			},

			ClearChart() {
				if (g_KLine.JSChart) {
					g_KLine.JSChart.ChartDestory();
					g_KLine.JSChart = null;
				}

				// #ifdef H5
				var divKLine = document.getElementById('kline');
				while (divKLine.hasChildNodes()) {
					divKLine.removeChild(divKLine.lastChild);
				}
				// #endif
			},

			CreateKLineChart_h5() //创建K线图
			{
				if (g_KLine.JSChart) return;

				//黑色风格
				let blackStyle = HQChart.HQChartStyle.GetStyleConfig(HQChart.STYLE_TYPE_ID.BLACK_ID);

				blackStyle.BGColor = 'rgb(12,23,37)'; //背景
				blackStyle.FrameTitleBGColor = 'rgb(16,28,45)'; //指标标题背景
				blackStyle.FrameSplitTextColor = 'rgb(101,117,138)'; //刻度颜色

				//K线颜色
				blackStyle.UpBarColor = 'rgb(37,175,142)'; //K线上涨柱子颜色
				blackStyle.UpTextColor = blackStyle.UpBarColor; //上涨价格颜色
				blackStyle.DownBarColor = 'rgb(210,73,99)'; //K线下跌柱子颜色
				blackStyle.DownTextColor = blackStyle.DownBarColor; //下跌价格颜色

				//指标线段颜色
				blackStyle.Index.LineColor[0] = 'rgb(88,106,126)';
				blackStyle.Index.LineColor[1] = 'rgb(222,217,167)';
				blackStyle.Index.LineColor[2] = 'rgb(113,161,164)';

				//最新价格刻度颜色
				blackStyle.FrameLatestPrice.UpBarColor = 'rgb(37,175,142)';
				blackStyle.FrameLatestPrice.DownBarColor = 'rgb(210,73,99)';

				//面积图颜色
				blackStyle.CloseLineColor = 'rgb(113,121,133)'; //收盘价线颜色
				blackStyle.CloseLineAreaColor = ['rgba(36,41,57,0.8)', 'rgba(22,34,53,0.3)']; //收盘价面积图颜色

				//最高最低价颜色
				blackStyle.KLine.MaxMin.Color = 'rgb(255,250,240)';

				this.$refs.kline.style.backgroundColor = blackStyle.BGColor;
				HQChart.JSChart.SetStyle(blackStyle);

				this.KLine.Option.Symbol = this.Symbol;
				let chart = HQChart.JSChart.Init(this.$refs.kline);
				this.KLine.Option.NetworkFilter = this.NetworkFilter;
				chart.SetOption(this.KLine.Option);
				g_KLine.JSChart = chart;
			},

			CreateKLineChart_app() {
				if (g_KLine.JSChart) return;

				let element = new JSCommon.JSCanvasElement();
				// #ifdef APP-PLUS
				element.IsUniApp = true; //canvas需要指定下 是uniapp的app
				// #endif
				element.ID = 'kline2';
				element.Height = this.ChartHeight; //高度宽度需要手动绑定!!
				element.Width = this.ChartWidth;

				//var blackStyle=JSCommonHQStyle.GetStyleConfig(JSCommonHQStyle.STYLE_TYPE_ID.BLACK_ID);
				//JSCommon.JSChart.SetStyle(blackStyle);

				g_KLine.JSChart = JSCommon.JSChart.Init(element);
				this.KLine.Option.NetworkFilter = (data, callback) => {
					this.NetworkFilter(data, callback);
				};
				this.KLine.Option.Symbol = this.Symbol;
				this.KLine.Option.IsClickShowCorssCursor = true;
				this.KLine.Option.IsFullDraw = true; //每次手势移动全屏重绘
				g_KLine.JSChart.SetOption(this.KLine.Option);
			},

			CreateKLineChart() {
				// #ifdef H5
				this.CreateKLineChart_h5();
				// #endif

				// #ifndef H5
				this.CreateKLineChart_app();
				// #endif
			},

			NetworkFilter(data, callback) {
				// console.log('[KLineChart::NetworkFilter] data', data);
				switch (data.Name) {
					case 'KLineChartContainer::ReqeustHistoryMinuteData': //分钟全量数据下载
						this.RequestHistoryMinuteData(data, callback);
						break;
					case 'KLineChartContainer::RequestFlowCapitalData': //数字货币不会调用
						this.RequestFlowCapitalData(data, callback);
						break;
					case 'KLineChartContainer::RequestHistoryData': //日线全量数据下载
						this.RequestHistoryData(data, callback);
						break;
				}
			},

			//
			//WS
			//心跳包
			SendWSHeartMessage() {
				if (this.SocketOpen) {
					var pong = {
						'pong': new Date().getTime()
					};
					var message = JSON.stringify(pong);
					uni.sendSocketMessage({
						data: message
					});
				}
			},

			//取消订阅上一次的信息
			SendUnSubscribeMessage() {
				if (!this.LastSubString || !this.SocketOpen) return;

				var message = JSON.stringify({
					unsub: this.LastSubString
				}); //取消上次订阅的信息
				uni.sendSocketMessage({
					data: message
				});
				this.LastSubString = null; //清空最后一个订阅信息
			},

			RequestWSData(data, recvCallback) {
				if (!this.SocketOpen) {
					uni.connectSocket({
						url: this.WSUrl
					}); //创建连接

					uni.onSocketOpen((event) => {
						this.SocketOpen = true;
						// console.log(event);
						var message = JSON.stringify(data.SendData);
						uni.sendSocketMessage({
							data: message
						});
						if (data.SendData.sub) this.LastSubString = data.SendData.sub;
					});
				} else {
					this.SendUnSubscribeMessage();
					var message = JSON.stringify(data.SendData);
					uni.sendSocketMessage({
						data: message
					});
					if (data.SendData.sub) this.LastSubString = data.SendData.sub; //保存最后一个订阅信息
				}

				uni.onSocketMessage((event) => {
					let ploydata = new Uint8Array(event.data);
					let msg = pako.inflate(ploydata, {
						to: 'string'
					});
					//console.log("[KLineChart::RequestWSData] recv ", msg);
					var recvData = JSON.parse(msg);
					if (recvData.ping) {
						this.SendWSHeartMessage(); //回复服务器心跳包
					} else if (recvData.unsubbed) //取消订阅成功
					{

					} else if (recvData.subbed) //订阅成功 
					{

					} else {
						recvCallback(recvData, data);
					}
				});

				uni.onSocketError((evnet) => {
					console.log(event);
				});

			},

			//生成请求数据
			GeneratePostData(symbol, period) {
				//1min, 5min, 15min, 30min, 60min,4hour,1day,1week, 1mon
				var MAP_PERIOD = new Map([
					[4, '1min'],
					[5, '5min'],
					[6, "15min"],
					[7, "30min"],
					[0, '1day'],
					[1, '1week'],
					[2, '1mon'],
					[3, '1year'],
				]);

				var strPeriod = MAP_PERIOD.get(period);

				var reqData = {
					req: `market.${symbol}.kline.${strPeriod}`,
					symbol: symbol,
					period: strPeriod
				};

				var subData = {
					sub: `market.${symbol}.kline.${strPeriod}`,
					symbol: symbol,
					period: strPeriod
				};

				return {
					Req: reqData,
					Sub: subData
				};
			},

			//请求分钟历史数据
			RequestHistoryMinuteData(data, callback) {
				data.PreventDefault = true;
				var symbol = data.Request.Data.symbol;
				var period = data.Self.Period; //周期

				var postData = this.GeneratePostData(this.OriginalSymbol, period);

				var obj = {
					SendData: postData.Req,
					Symbol: symbol,
					OriginalSymbol: this.OriginalSymbol,
					Period: period,
					Callback: callback
				};

				this.RequestWSData(obj, (recvData, data) => {
					this.RecvHistoryMinuteData(recvData, data);
				});
			},

			//接收历史分钟数据
			RecvHistoryMinuteData(recvData, data) {
				if (recvData.rep != data.SendData.req) return;

				var hqChartData = {
					code: 0,
					data: []
				};
				hqChartData.symbol = data.Symbol;
				hqChartData.name = data.OriginalSymbol;

				if (recvData.data) {
					var yClose = null; //前收盘
					for (var i in recvData.data) {
						var item = recvData.data[i];

						//时间戳转换
						var dateTime = new Date();
						dateTime.setTime(item.id * 1000);
						var date = dateTime.getFullYear() * 10000 + (dateTime.getMonth() + 1) * 100 + dateTime.getDate();
						var time = dateTime.getHours() * 100 + dateTime.getMinutes();

						var newItem = [date, yClose, item.open, item.high, item.low, item.close, item.vol, item.amount,
							time
						];
						yClose = item.close;
						hqChartData.data.push(newItem);
					}
				}

				// #ifdef H5
				data.Callback(hqChartData);
				// #endif

				// #ifndef H5
				data.Callback({
					data: hqChartData
				});
				// #endif

				this.SubscribeMinuteRealtimeData(data);
			},

			//订阅最新分钟K线数据
			SubscribeMinuteRealtimeData(data) {
				//订阅最新数据
				var postData = this.GeneratePostData(data.OriginalSymbol, data.Period);
				var obj = {
					SendData: postData.Sub,
					Symbol: data.Symbol,
					OriginalSymbol: data.OriginalSymbol,
					Period: data.Period
				};

				this.RequestWSData(obj, (recvData, data) => {
					this.RecvMinuteRealtimeData(recvData, data);
				});
			},

			RecvMinuteRealtimeData(recvData, data) {
				if (recvData.ch != data.SendData.sub) return;

				var internalChart = g_KLine.JSChart.JSChartContainer;
				var period = internalChart.Period;
				var symbol = internalChart.Symbol;
				if (symbol != data.Symbol || period != data.Period) return;

				var hqChartData = {
					code: 0,
					data: [],
					ver: 2.0
				}; //更新数据使用2.0版本格式
				hqChartData.symbol = data.Symbol;
				hqChartData.name = data.OriginalSymbol;

				//TODO:把recvData => hqchart内部格式 格式看教程
				//HQChart使用教程30-K线图如何对接第3方数据15-轮询增量更新1分钟K线数据

				var item = recvData.tick;

				var dateTime = new Date();
				dateTime.setTime(item.id * 1000);
				var date = dateTime.getFullYear() * 10000 + (dateTime.getMonth() + 1) * 100 + dateTime.getDate();
				var time = dateTime.getHours() * 100 + dateTime.getMinutes();
				var newItem = [date, null, item.open, item.high, item.low, item.close, item.vol, item.amount, time];
				this.last_price = item.close;
				this.lever_hight = item.high;
				this.lever_low = item.low;
				hqChartData.data.push(newItem);

				// #ifdef H5
				internalChart.RecvMinuteRealtimeData(hqChartData);
				// #endif

				// #ifndef H5
				internalChart.RecvMinuteRealtimeData({
					data: hqChartData
				});
				// #endif
			},


			//日K数据下载
			RequestHistoryData(data, callback) {
				data.PreventDefault = true;
				var symbol = data.Request.Data.symbol;
				var period = data.Self.Period; //周期
				var postData = this.GeneratePostData(this.OriginalSymbol, period);

				var obj = {
					SendData: postData.Req,
					Symbol: symbol,
					OriginalSymbol: this.OriginalSymbol,
					Period: period,
					Callback: callback
				};

				this.RequestWSData(obj, (recvData, data) => {
					this.RecvHistoryData(recvData, data);
				});
			},

			RecvHistoryData(recvData, data) //接收到日线数据 转化成hqchart格式数据
			{
				if (recvData.rep != data.SendData.req) return;

				var hqChartData = {
					code: 0,
					data: []
				};
				hqChartData.symbol = data.Symbol;
				hqChartData.name = data.OriginalSymbol;

				if (recvData.data) {
					var yClose = null; //前收盘
					for (var i in recvData.data) {
						var item = recvData.data[i];

						//时间戳转换
						var dateTime = new Date();
						dateTime.setTime(item.id * 1000);
						var date = dateTime.getFullYear() * 10000 + (dateTime.getMonth() + 1) * 100 + dateTime.getDate();
						var time = dateTime.getHours() * 100 + dateTime.getMinutes();

						var newItem = [date, yClose, item.open, item.high, item.low, item.close, item.vol, item.amount];
						this.last_price = item.close;
						this.lever_hight = item.high;
						this.lever_low = item.low;
						yClose = item.close;
						hqChartData.data.push(newItem);
					}
				}

				// #ifdef H5
				data.Callback(hqChartData);
				// #endif

				// #ifndef H5
				data.Callback({
					data: hqChartData
				});
				// #endif

				this.SubscribRealtimeData(data);
			},

			//订阅最新日K线数据
			SubscribRealtimeData(data) {
				//订阅最新数据
				var postData = this.GeneratePostData(data.OriginalSymbol, data.Period);

				var obj = {
					SendData: postData.Sub,
					Symbol: data.Symbol,
					OriginalSymbol: data.OriginalSymbol,
					Period: data.Period
				};

				this.RequestWSData(obj, (recvData, data) => {
					this.RecvRealtimeData(recvData, data);
				});
			},

			RecvRealtimeData(recvData, data) {
				if (recvData.ch != data.SendData.sub) return;

				var internalChart = g_KLine.JSChart.JSChartContainer;
				var period = internalChart.Period;
				var symbol = internalChart.Symbol;
				if (symbol != data.Symbol || period != data.Period) return;

				var hqChartData = {
					code: 0,
					stock: []
				};
				//TODO:把recvData => hqchart内部格式 格式看教程
				//HQChart使用教程30-K线图如何对接第3方数据14-轮询增量更新日K数据

				var stock = {
					symbol: data.Symbol,
					name: data.OriginalSymbol
				};
				var item = recvData.tick;
				var dateTime = new Date();
				dateTime.setTime(item.id * 1000);
				var date = dateTime.getFullYear() * 10000 + (dateTime.getMonth() + 1) * 100 + dateTime.getDate();
				var time = dateTime.getHours() * 100 + dateTime.getMinutes();
				// this.last_price = item.close;
				// this.lever_hight = item.high;
				// this.lever_low = item.low;
				stock.date = date;
				stock.yclose = null;
				stock.open = item.open;
				stock.high = item.high;
				stock.low = item.low;
				stock.price = item.close;
				stock.vol = item.vol;
				stock.amount = item.amount;

				hqChartData.stock.push(stock);

				// #ifdef H5
				internalChart.RecvRealtimeData(hqChartData);
				// #endif

				// #ifndef H5
				internalChart.RecvRealtimeData({
					data: hqChartData
				});
				// #endif
			},


			///
			//手势事件 app/小程序才有
			//KLine事件
			KLineTouchStart: function(event) {
				if (g_KLine.JSChart) g_KLine.JSChart.OnTouchStart(event);
			},

			KLineTouchMove: function(event) {
				if (g_KLine.JSChart) g_KLine.JSChart.OnTouchMove(event);
			},

			KLineTouchEnd: function(event) {
				if (g_KLine.JSChart) g_KLine.JSChart.OnTouchEnd(event);
			},
		}
	}
</script>

<style lang="scss" scoped>
	.point-container {
		padding-bottom: 160rpx;

		.padd-auto {
			padding: 0 30rpx;
		}

		.viewklinechart {
			height: 1027rpx;
		}

		.line-empty {
			height: 1px;
			background-color: rgba(255, 255, 255, .1);
			margin: 60rpx 0 20rpx;
		}

		.price-box {
			font-size: 24rpx;
			color: rgba(255, 255, 255, .54);
			margin-top: 60rpx;

			.left-box {
				&>text {
					font-size: 58rpx;
					height: 58rpx;
					line-height: 58rpx;
				}

				&>view {
					margin-top: 30rpx;
					height: 24rpx;
					line-height: 24rpx;

					.white-text {
						margin-right: 30rpx;
					}
				}
			}

			.right-box {
				width: 186rpx;
				height: 106rpx;
				flex-direction: column;

				&>view {
					height: 24rpx;
					line-height: 24rpx;
				}
			}
		}

		.data-btn {
			padding: 30rpx;
			background-color: #2e3653;
			position: fixed;
			bottom: 0;
			width: 100%;

			.btn {
				width: 336rpx;
				height: 88rpx;
				line-height: 88rpx;
				text-align: center;
				border-radius: 16rpx;
				color: #fff;

				&.fall {
					background-color: #c64a5d;
				}

				&.rise {
					background-color: #11caa1;
				}
			}
		}
	}
</style>
